<!DOCTYPE html>
<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
    <!-- This is the Javascript file of jqGrid -->
    <script type="text/ecmascript" src="../../../js/trirand/src/jquery.jqGrid.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc. -->
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid.css" />
    <meta charset="utf-8" />
    <title>jqGrid Functionality - Built-In Formatters</title>
</head>
<body>
    <div>
        <table id="sampleGrid"><tr><td></td></tr></table>
        <div id="pagerSampleGrid"></div>
    </div>


    <script type="text/javascript">
 $(document).ready(function () {
            setjqGridSettings();
            setGridRequirentes();
        });

    var urlCombo = {"d":[["1","London"],["2","Washington"],["3","Australia"]]};

var buildSelectLocal = function(options) {
	return function(data) {
  	var sel = urlCombo;
		sel = sel.d ? sel.d : sel;
		var s = '<select><option value="">- Select ' + options.label + ' -</option>';
		for (var i = 0, l=sel.length; i<l ; i++) {
			s += '<option value="'+sel[i][0]+'">'+sel[i][1]+'</option>';
		}
		return s + "</select>";
	};
};

function setjqGridSettings()
{

    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;

    $.extend($.jgrid.defaults,
    {
        mtype:"POST",
        datatype: 'json',
        ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
        viewrecords: true,
        loadonce: true,
        gridview: true,
        scrollOffset: 0,
        autowidth: true,
        ignoreCase: true,
        jsonReader : {
            root: "d.rows",
            page: "d.page",
            total: "d.total",
            records: "d.records",
            cell: ""},
        ajaxSelectOptions: { type: "POST", contentType: 'application/json; charset=utf-8' }
    });
    $.extend($.jgrid.edit,
    {
        ajaxEditOptions: { contentType: "application/json; charset=utf-8" },
        closeAfterEdit: true,
        closeAfterAdd: true,
        closeOnEscape: false,
        reloadAfterSubmit: false,
        jqModal: false
    });
}

function setGridRequirentes()
{
    var modSettings =
    {
        width: 440,
        url: "data1.json",
        postData: {
            json: JSON.stringify(editResponse)
        },
        serializeEditData: function(postData) {
            alert("idCity: " + postData.idCity);
			return postData;
        }
    };

    var editResponse = {};
    var serverResponse =
{"d":{"page":1,"total":1,"records":100,"rows":[["13570","Some name 1","Australia"],["34233","Some name 2","Washington"]]}};

    $("#sampleGrid").jqGrid({
        //datatype:'local',
        //data: sampleData,
        url: "data1.json",
        postData: {
            json: JSON.stringify(serverResponse)
        },
        mtype: "POST",
        datatype: "json",
        prmNames: {id: "idPer", search:null, nd : null, page: null, rows: null, sort : null, order : null},
        colNames:['idPer', 'person', 'idCity'],
        colModel:[
            {name:'idPer',index:'idPer', key: true, width:55, editable:true, editrules:{edithidden:false}, sorttype:'int'},
            {name:'person',index:'person', editable:true, editoptions:{size:39}, width:190, sorttype:'text'},
            {name:'idCity',index:'idCity', editable:true, edittype:'select',
                editoptions:{
                dataUrl: 'select.json',
        				postData: {
            			json: JSON.stringify(urlCombo)
        				},
                buildSelect: buildSelectLocal({label: 'City'})
                },width:90, sorttype:'text'}],
        rowNum:5,
        rowList:[5,10,15,20],
        pager: '#pagerSampleGrid',
        caption:"Sample Grid"
    });

    $("#sampleGrid").jqGrid('navGrid','#pagerSampleGrid',{edit:true,add:true,del:false,search:false,refresh:false},modSettings);
}
    //]]>

    </script>

    <!-- This code is related to code tabs -->
    <br />
    <span style="font-size: 12px; font-family: Tahoma">Click on the Tabs below the see the relevant code for the example:</span>
    <br /><br />
    <div id="codetabs" style="width:700px; height: 400px; font-size:65%;"></div>
    <script type="text/ecmascript" src="../../../js/jquery-ui.min.js"></script>
    <script type="text/ecmascript" src="../../../js/prettify/prettify.js"></script>
    <link rel="stylesheet" href="../../../css/prettify.css" />
        <script type="text/ecmascript" src="../../../js/codetabs.js"></script><script type="text/ecmascript" src="../../../js/themeswitchertool.js"></script>

    <script type="text/javascript">

        var tabData =
            [
                { name: "HTML", url: "index.html", lang: "lang-html" },
                { name: "Data.JSON", url: "data.json", lang: "lang-json" },
				{ name: "Description", url: "description.html", lang: "lang-html" }
            ];

        codeTabs(tabData);

    </script>
    <!-- End of code related to code tabs -->
</body>
</html>
